<template>
  <!-- <div class="common-layout">
    <el-container>
      <el-header>Header </el-header>
      <el-main>Main</el-main>
    </el-container>
  </div> -->

  <el-container class="container">
    <el-header class="fixed-header">
      <!-- 这里放置导航条内容 -->
       <!-- 制定title 展示 -->
      <el-menu mode="horizontal" :ellipsis="false" >
        <div class="header-logo header-btn">
           <img
                src="@/assets/vue.svg"
                alt="Element logo"
            />
            <div class="title">
                知识管理平台
            </div>
        </div>

        <div class="flex-grow"></div>
        <el-menu-item index="home" to="/home" @click="handleSelect('home')">首页</el-menu-item>
        <el-menu-item index="help" to="/help" @click="handleSelect('help')">帮助</el-menu-item>
        <div class="header-btn">
            <el-button type="primary" @click="handleLogin()">登录/注册</el-button>
        </div>    
   
      </el-menu>
    </el-header>

    <el-main>
        <!-- <router-view></router-view>  -->
        <component :is="currentComponent" />
        <!-- 动态内容显示在此处 -->
    </el-main>

   
  </el-container>

</template>

<script lang="ts">

import Help from '@/views/index/help/index.vue'; // 假设这是帮助页面组件
import Home from '@/views/index/indexHome/index.vue'; // 假设这是首页组件
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
    // 1.2 import store
    import useUserStore from '@/store/modules/user';

    export default defineComponent({
      
      setup() {
        const router = useRouter(); // 在这里定义一次即可
        const userStore = useUserStore();
        /**
         * 1.1 动态组件处理
         */
        const currentComponent = ref(Home); // 默认显示首页组件
        const handleSelect=(key: string) =>{
            switch (key) {
                case 'home':
                currentComponent.value = Home;
                break;
                case 'help':
                currentComponent.value = Help;
                break;
                default:
                currentComponent.value = Home;
            }
        }

        /**
         * 1.2 login view
         */
        const handleLogin = () => {
          if (!userStore.getIsSetUser) {
            router.push({ path: '/login' }); // 使用已经定义的 router 实例
          }else{
            router.push({ path: '/home' }); // 使用已经定义的 router 实例
          }
       }

        return {
          currentComponent,
          handleSelect,
          handleLogin
        }
      }

      });
 

</script>

<style lang="scss" scoped>



root {
  --header-height: 60px;
}


.title{
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    font-family: "黑体";
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000; /* 保证header在其他内容之上 */
  height: var(--header-height); /* 明确指定Header的高度 */
  background-color: #fff; /* 设置背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1); /* 添加阴影效果 */
}

.container {
  padding-top: 70px; /* 根据header的高度调整，留出一些额外的空间 */

}

.flex-grow {
  flex-grow: 1;
}

.header-logo{
  justify-content: center;
  display: flex;
  .title{
    color: #000;
  }
}



.header-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 20px; /* 调整左右内边距 */
}

/* 新增：针对 el-menu-item 内容的样式 */
.el-menu-item img {
  margin-right: 8px; /* 在logo和文本之间添加间隔 */
}

/* 新增：针对按钮的样式 */
.header-btn .el-button {
  font-size: 14px;
  padding: 8px 20px; /* 调整按钮内边距 */
}

/* 可选：为 el-main 设置最小高度 */
// .el-main {
//   min-height: calc(100vh - var(--header-height) - 10px);
// }
.el-main {
  min-height: calc(100vh - 70px); /* 减去header高度以及顶部留白 */
}

</style>